@import "../base/util/scss_function";

.header {
  @include clearfix-row();
  color: #fff;
  position: relative;
  text-align: center;
  &:before {
    content: '';
    float: left;
    width: 100%;
    height: 90px;
    background: url('/image/head-icon.png') center no-repeat;
    background-size: cover;
  }
  & .search {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #fff;
  }
  & .cd-title {
    position: absolute;
    top: 5px;
    right: -3px;
    color: #000;
    font-size: 12px;
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9);
    letter-spacing: 17px;
  }
  & .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -47px 0 0 -70px;
    & img {
      width: 120px
    }
  }
  & .qq-serves {
    position: absolute;
    color: #000;
    top: 23px;
    right: 0px;
    font-size: 12px;
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9);
    transform: scale(.9);
    & a {
      color: #000;
    }
  }
}

.tab-list {
  @include clearfix-row();
  line-height: 35px;
  font-size: 0;
  & .tab-item {
    @include transition(.3s);
    text-align: center;
    float: left;
    position: relative;
    font-size: 14px;
    color: #181817;
    border: solid #ff7e00;
    border-width: 1px 0;
    &.active {
      background-color: #ff7e00;
      color: #fff;
    }
  }
}

.shop-list {
  @include clearfix-row();
  & .list {
    @include clearfix-row();
    &>li {
      display: block;
      position: relative;
      line-height: 70px;
      padding: 10px 100px 10px 30px;
      overflow: hidden;
      border-bottom: 1px solid #ff7e00;
      & .title {
        display: inline-block;
        width: 100%;
        line-height: 25px;
        font-size: 18px;
        vertical-align: middle;
        color: #181817;
      }
      & .icon {
        position: absolute;
        max-width: 90px;
        max-height: 80%;
        right: 16px;
        bottom: 0;
      }
    }
  }
}